<template>
    <div>
        <el-container>
            <el-header>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-menu router="true" :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect" background-color="#DCE4F1" text-color="#456DA0" active-text-color="#0A316B"> 
                            <el-menu-item index="/Start">首页</el-menu-item>
                            <!-- <el-menu-item  @click="myspaceClick()">题库</el-menu-item> -->
                            <el-menu-item  @click="myspaceClick()">题库</el-menu-item>
                            <!-- <el-menu-item  @click="myspaceClick()">课程</el-menu-item> -->
                            <el-menu-item  @click="myspaceClick()">课程</el-menu-item>
                            <!-- <el-menu-item   @click="myspaceClick()">商城</el-menu-item> -->
                            <el-menu-item   @click="myspaceClick()">商城</el-menu-item>
                            <!-- <el-menu-item  @click="myspaceClick()">活动发布</el-menu-item> -->
                            <el-menu-item  @click="myspaceClick()">活动发布</el-menu-item>
                        </el-menu>
                    </el-col>
                    <el-col :span="3" :offset="9">
                        <el-menu router="true" :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" style="background-color:#DCE4F1" background-color="#DCE4F1" text-color="#456DA0" active-text-color="#0A316B"> 
                            <el-menu-item v-if="logFlags==0" index="/Login">
                            <el-button style="background-color:#DCE4F1;color:#456DA0" index="/Login">登录</el-button>
                            <el-button style="background-color:#DCE4F1;color:#456DA0" index="/Register">注册</el-button>
                            </el-menu-item>
                            <el-submenu v-else index="6"> 
                                <template slot="title">个人中心</template> 
                                <el-menu-item index="/Myspace">我的空间</el-menu-item> 
                                <!-- <el-menu-item index="/Myspace">个人信息</el-menu-item>  -->
                                <el-menu-item index="/Manage" v-show="flag">管理</el-menu-item> 
                                <el-menu-item index="6-3">我的订单</el-menu-item> 
                                <el-menu-item @click="exit()">退出</el-menu-item> 
                            </el-submenu> 
                        </el-menu>                    
                    </el-col>
                </el-row>
            </el-header> 
        </el-container>

    </div>

</template>

<script>
import Cookies from 'js-cookie';
import axios from 'axios';
    export default{
        data () {
            return {
                logFlags: 0,
                activeIndex: '1',
                activeIndex2: '1',
                flag: 1,
                id:''
            };
    },
      mounted() {
         axios({
             method: 'post',
                url: '/getUserById',
               dataType: 'json',
             data: {id:this.showId},
                 headers: {
            'Content-Type': 'application/json;charset=utf-8'
              }
            }).then(res=>{
                console.log(res)
                console.log(res)
                console.log(res.data[0].permission)
                this.logFlags = res.data.is_exist
            
               console.log(res.data.permission)
                this.username = res.data.user_name
             
         })
    },
    computed: {
        showId(){
            return Cookies.get('id')
        },
    },
        methods: { 
            handleSelect(key, keyPath) {
                console.log(key, keyPath); 
            },
            myspaceClick() {
            this.$router.push('/Question')
            },
            exit() {
            localStorage.clear()
                window.sessionStorage.clear()
                Cookies.remove("id")
                Cookies.remove("permission")
              Cookies.remove("logFlag")
			this.$router.push('/Login')
            }
            
        } 

    }
</script>

<style scoped>
.StartHeader{
    height: 100px;
    font-size: 20px;
}
.el-header{ 
        background-color: #DCE4F1;
        /* background-color: black; */
        color: #333; 
        text-align: center; 
        line-height: 80px;
    }

</style>